<template>
  <el-button
    v-bind="{
      ...elProps,
      ...elShape,
    }"
    :style="elStyles"
    v-on="elEvents"
  >
    {{ config.props.slot }}
  </el-button>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue";
import { omit } from "lodash-es";
import type { ComponentType } from "@/materials/index.d";

defineOptions({
  name: "DangerButton",
});

const props = defineProps({
  config: {
    type: Object as PropType<ComponentType>,
    required: true,
  },
});
// 组件要绑定的属性
const elProps = computed(() => omit(props.config.props, ["slot", "shape"]));
// 组件要绑定的样式
const elStyles = computed(() => props.config.styles);
// 组件要绑定的事件
const elEvents = computed(() => props.config.events);

const elShape = computed(() => {
  const shape = props.config.props.shape;
  if (shape === "round") {
    return { round: true };
  } else if (shape === "circle") {
    return { circle: true };
  } else {
    return {};
  }
});
</script>
